<html>
<head>
    <title>员工列表</title>
</head>

<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
<style>
    .layui-table-cell {
        height: 60px;
        line-height: 60px;
    }
    /* height: auto !important;
      white-space: normal;
      padding: 0px;
  } */

    th .layui-table-cell {
        height: 30px;
        line-height: 30px;
    }

    th .laytable-cell-1-0-7 {
        height: 30px;
        line-height: 30px;
    }

    .layui-table img {
        width: 100px;
        height: 60px;
    }
    #switchPay{
       margin-top: 20px;
    }
</style>
<body>

<fieldset class="table-search-fieldset">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="" id="fm1">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">编号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="id" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">员工名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-input-inline">
                    <!-- <label class="layui-form-label">部门</label> -->
                    <select name="depart_id" id="depart">
                        <option value="">按部门查找</option>
                    </select>
                  </div>
                <!-- <div class="layui-inline">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sex" autocomplete="off" class="layui-input">
                    </div>
                </div> -->
                <!-- <div class="layui-inline">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="address" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" autocomplete="off" class="layui-input">
                    </div>
                </div> -->
                <div class="layui-inline">
                    <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i
                            class="layui-icon"></i> 搜 索</button>
                </div>
            </div>
        </form>
    </div>
</fieldset>


<table class="layui-hide" id="employeeList" lay-filter="test"></table>
<!-- 图片 -->
<script type="text/html" id="picTpl">
    <img src="{{d.thumb}}" name="thumb" alt="" style="width: 100%; height: 100%;">
</script>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!-- <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> -->
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delStudents"> 批量删除 </button>
        <!-- <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="bar"> 男女比例柱状图 </button> -->
        <!-- <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="pie"> 各类商品购买统计饼状图 </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="export"> 导出 </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="import"> 导入 </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="templatedownload"> 模板下载 </button> -->
    </div>
</script>
<!-- 薪资颜色变化-->
<script type="text/html" id="salaryTmp">
   {{# if(d.salary>5000){ }}
     <span style="color: blue;">{{d.salary}}</span>
   {{# } else{ }}
     <span style="color: green;">{{d.salary}}</span>
   {{# } }}

</script>
<!-- 操作 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
</script>

<script type="application/javascript" src="../lib/layui-v2.6.3/layui.js"></script>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form= layui.form;
        $ = layui.jquery;

     // 暂时不用token
      var token = JSON.parse(localStorage.getItem("token"));

      $.ajaxSetup({
            // 发送cookie
            xhrFields: {
                withCredentials: true
            },
            // headers: {
            //     "token": token     //要是在这里配置请求头 就会导致 ajax 请求 变成复杂请求  会发送预检请求
            // }
        })
        // var token = JSON.parse(localStorage.getItem("token"));

        //表格渲染
        table.render({
            elem: '#employeeList'
            ,url:'http://127.0.0.1:8080/employee/employeeList'
            ,toolbar: '#toolbarDemo'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
       
            ,cols: [[
                {type:'checkbox',fixed: 'left'}
                ,{field:'id', width:90, title: '编号',fixed: 'left', sort: true}
                ,{field:'thumb', width:110, title: '员工头像',templet:'#picTpl'}
                ,{field:'name', width:90, title: '员工姓名'}
                ,{field:'sex', width:70, title: '性别'}
                ,{field:'age', width:70, title: '年龄'}
                ,{field:'entry_time', width:130, title: '入职日期'}
                ,{field:'telephone', width:120, title: '联系方式',align:'center'}
                ,{field:'address', width:120, title: '住址',align:'center'}
                ,{field:'depart_id', width:120, title: '部门id',align:'center',hide:true}
                ,{field:'job_id', width:120, title: '住址',align:'center',hide:true}
                ,{field:'depart_name', title: '部门名称', width: 110,style:"color:green;"} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'job_name',width:110, title: '职位'}
                ,{field:'salary',width:120, title: '薪资',templet:'#salaryTmp',sort:true}
                ,{fixed:'right', title:'操作', width: 145, minWidth: 140, toolbar: '#barDemo'}
            ]]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 3 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页
            }
        });
        //动态获取部门
      $.ajax({
        "type":'post',
        "url":"http://127.0.0.1:8080/department/departmentList",
        "dataType":"json",
        "success":function(res){
            if(res.code==200){
                var department=res.data.departments;
                var str="<option value=''>请选择所属部门</option>";
                console.log(department.length);
                for(var i=0;i<department.length;i++){
                    str+="<option value='"+department[i].id+"'>"+department[i].depart_name+"</option>"; //动态拼接option
                }
                console.log(str);
                $('#depart').html(str);
                form.render();
            }
        }
    })
        //监听模糊查询
        form.on('submit(data-search-btn)', function (data) {

            // var result = JSON.stringify(data.field);
            // layer.alert(result, {
            //     title: '最终的搜索信息'
            // });

            //执行搜索重载
            table.reload('employeeList', {
                // url: "/student/list",
                page: {
                    curr: 1
                }
                , where: {
                    //searchParams: result
                    "id": data.field.id,
                    "name": data.field.name,
                    "depart_id":data.field.depart_id
                
                }
            }, true);

            return false;  // 如果 改为 true   ，表格会 再查询一次 ,所以 这里写为 false
        });

        table.on('checkbox(test)', function(obj){
          console.log(obj); //当前行的一些常用操作集合
          console.log(obj.checked); //当前是否选中状态
         console.log(obj.data); //选中行的相关数据
          console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
    });

    //付款状态操作
  form.on('switch(pay_status)', function(obj){
    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
  });

      //配送状态操作
      form.on('switch(trans_status)', function(obj){
    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
  });
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            console.log(obj);
            console.log(checkStatus)
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                case 'add':
                    // layer.msg("添加操作");

                    layer.open({
                        title: '添加员工',
                        shade: 0.2,
                        type: 2,
                        shadeClose: true,   // 点别的地方 是否关闭当前 layer    true收关闭   false 不关闭
                        area: ['60%', '90%'],
                        fixed: true, //不固定
                        offset:'t',
                        maxmin: true,
                        content: './addEmployee.html',
                        end: function (index) {
                            // 添加完事后  重新加载列表数据
                            table.reload('employeeList');
                        }
                    });


                    break;
                case 'delStudents':
                    var data=checkStatus.data;
                    console.log(checkStatus);
                    var arr=[];
                    for(var i=0;i<data.length;i++){
                        arr.push(data[i].id);
                    }
                    var ids = arr.join(',');
                    // console.log(obj);
                    layer.confirm("确认要批量删除么?",{offset:'t'},function(index){
                        $.get("http://127.0.0.1:8080/employee/delAll",{'ids':ids},function(res){
                            if(res.code==200){
                                // layer.msg("删除成功",{icon:6,time:2000});
                                layer.msg("删除成功");
                               table.reload('studentList');
                            }
                        },'json')
                        layer.close(index);
                    })
                    break;
                case 'pie':
                layer.open({
                        title: '商品购买量统计',
                        shade: 0.2,
                        type: 2,
                        offset:'t',
                        shadeClose: true,   // 点别的地方 是否关闭当前 layer    true收关闭   false 不关闭
                        area: ['80%', '70%'],
                        fixed: true, //不固定
                        maxmin: true,
                        content: './pie.html',
                        end: function (index) {
           
        
                        }
                    });
                    //按地区统计
                    break;
                    case 'export':
                    // 数据导出到 excel 中
                    // $("#fm1").serialize()  获取表单的输入的表单项内容  拼成正确的参数格式
                    location.href="http://127.0.0.1:8080/order/export?"+$("#fm1").serialize();
                    break;    
                
                case 'import':
                layer.open({
                        title: '学员信息导入',
                        shade: 0.2,
                        type: 2,
                        shadeClose: true,   // 点别的地方 是否关闭当前 layer    true收关闭   false 不关闭
                        area: ['50%', '80%'],
                        fixed: true, //不固定
                        maxmin: true,
                        content: './orderImport.html',
                        end: function (index) {
                            table.reload('studentList');
                        }
                    });
                    break;  
                    // 模板下载
                case 'templatedownload':
                    //记住这种 发送请求的方式
                    location.href="http://127.0.0.1:8080/order/templateDownload";
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });
        //触发单元格工具事件
        table.on('tool(test)', function(obj){ // 双击 toolDouble
            var data = obj.data;
            console.log(obj)
            // console.log(data);
            // var data = JSON.stringify(data);
            if(obj.event === 'del'){
                layer.confirm('确认离职该员工么？', function(index){
                    //ajax get 请求
                    $.get("http://127.0.0.1:8080/employee/deleteEmployee",{"id":data.id},function (res){
                        console.log(res);
                        if (res.code==200){
                            layer.msg(res.message,{icon:6,time:2000});
                            obj.del();
                            table.reload("employeeList");
                        }else{
                            layer.msg(res.message)
                        }
                    },"json")
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                localStorage.setItem("employee",JSON.stringify(data))
                layer.open({
                    title: '编辑订单信息',
                    type: 2,
                    offset:'t',
                    area: ['80%','80%'],
                    content: './updateEmployee.html',
                    end:function (){
                        table.reload("employeeList");
                        // table.render();
                    }
                });
            }
        });
    });
</script>
</body>
</html>